<template>
  <div id="box">
    <p>{{time}}</p>
    <p>{{addNum}}</p>
    <p>{{count}}</p>
    <p>{{tab}}</p>
    <p>{{tab2}}</p>
    <p>{{tabFil}}</p>
    <p>{{tabFil2}}</p>
    <button @click="addFun">点击触发事件</button>
    <button @click="add(5)">点击触发事件</button>
    <button @click="add1">点击触发事件</button>
    <button @click="addCeShi">点击触发事件</button>
    <search-form :searchData='searchData' @tabList='tabList' :showReset='showReset'>
      <el-button slot="button-danger" type="danger">危险按钮</el-button>
      <el-button slot="button-pri" type="warning">插槽按钮</el-button>
    </search-form>
  </div>
</template>

<script>
import store from '../../store/store.js'
import searchForm from '../../components/searchForm/search.vue'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Login',
  store,
  components: {searchForm},
  data () {
    return {
      showReset: false,
      searchData: [
        {
          cell: 4,
          type: 'INPUT',
          lableName: '姓名',
          value: '222',
          name: 'name',
          place: '请输入姓名'
        },
        {
          cell: 4,
          type: 'INPUT',
          lableName: '身份证',
          value: '',
          name: 'idCard',
          place: '请输入身份证'
        },
        {
          cell: 4,
          type: 'RADIO',
          lableName: '单选问题',
          value: '',
          option: [
            {name: '上海', value: '1'},
            {name: '北京', value: '2'}
          ],
          name: 'radio',
          place: '请选择'
        },
        {
          cell: 4,
          type: 'RADIO',
          lableName: '单选问题2',
          value: '',
          option: [
            {name: 'hahah', value: '1'},
            {name: 'heiheih', value: '2'}
          ],
          name: 'radio1',
          place: '请选择'
        },
        {
          cell: 4,
          type: 'SELECT',
          lableName: '当前状态',
          value: '',
          option: [
            {name: '待审核', value: '1'},
            {name: '已审核', value: '2'}
          ],
          name: 'zhuangTai',
          place: '请选择状态'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      count: state => state.count,
      time: state => state.time
    }),
    ...mapGetters([
      'tabFil', 'tabFil2'
    ]),
    addNum () {
      return this.$store.state.count
    },
    tab () {
      return this.$store.getters.tabFil
    },
    tab2 () {
      return this.$store.getters.tabFil2
    }
  },
  mounted () {
    this.timeAct()
  },
  methods: {
    addFun () {
      this.$store.commit('add', 10)
    },
    ...mapMutations([
      'add'
    ]),
    ...mapActions([
      'add1', 'addCeShi', 'timeAct'
    ]),
    tabList (item) {
      console.log(item, '父组件拿到数据')
    }
  }

}
</script>

<style scoped>
  #box {
    width: 100%;
    height: 500px;
    background: #ebd4d4;
  }
</style>
